<template>
  <div>
    <div class="data">
      <div class="searchForm">
        <el-form :inline="true" :model="params" class="demo-form-inline">
          <el-form-item label="姓名">
            <el-input
              v-model="params.name"
              placeholder="按姓名称查找"
              class="block"
            ></el-input>
          </el-form-item>
          <el-form-item label="昵称">
            <el-input
              v-model="params.nickName"
              placeholder="按昵称查找"
              class="block"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              @click="searchList"
              class="block"
              >查询</el-button
            >
            <el-button
              type="danger"
              icon="el-icon-plus"
              @click="edit()"
              >增加</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="message">
      <div class="message1">
        <el-table :data="rows" stripe style="width: 100%">
          <el-table-column prop="photo" label="头像">
            <template slot-scope="scope">
              <img v-if="scope.row.photo" class="photo" :src="scope.row.photo" />
              <img v-else class="photo" src="@/assets/photo.png" />
            </template>
          </el-table-column>
          <el-table-column prop="name">
          </el-table-column>
          <el-table-column prop="nickName" label="昵称">
          </el-table-column>
          <el-table-column prop="sex" label="性别">
            <template slot-scope="scope">
              {{scope.row.sex == 2 ? '女' : '男'}}
            </template>
          </el-table-column>
          <el-table-column prop="status" label="是否启用">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.status"
                active-color="#13ce66"
                inactive-color="#ff4949"
                :active-value="1"
                :inactive-value="0"
                @change="changeStatus(scope.row)">
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="320">
            <template slot-scope="scope">
              <el-button
                type="primary"
                size="mini"
                icon="el-icon-edit"
                @click="edit(scope.row)"
                >编辑</el-button
              >
              <!-- 打开弹框 编辑用户权限 -->
              <el-button
                type="danger"
                size="mini"
                icon="el-icon-paperclip"
                @click="openGroup(scope.row.userId)"
                >分配权限</el-button
              >
              <el-button
                type="warning"
                size="mini"
                icon="el-icon-refresh-right"
                @click="resetPassWord(scope.row)"
                >重置密码</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="pagination">
      <el-pagination
        @size-change="sizeChange"
        @current-change="currentChange"
        :current-page="params.pageNum"
        :page-sizes="[10, 100, 200, 300, 400]"
        :page-size="params.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <el-dialog title="分配权限" :visible.sync="visible">
      <group ref="group"></group>
    </el-dialog>
    <el-dialog :title="editTitle" :visible.sync="editVisible">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item v-if="!ruleForm.userId" label="用户名" prop="userName">
          <el-input v-model="ruleForm.userName"></el-input>
        </el-form-item>
        <el-form-item label="头像" prop="photo">
          <el-upload
            class="avatar-uploader"
            :action="baseURL + '/upload'"
            :headers="headers"
            :on-success="onSuccess"
            :limit="3"
            :file-list="fileList"
            :show-file-list="true">
            <img v-if="ruleForm.photo" :src="ruleForm.photo" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <!-- <el-form-item label="头像" prop="photo">
          <upload
            class="avatar-uploader"
            action="/upload"
            :headers="headers"
            :cicle="true"
            :on-success="onSuccess">
            <img v-if="ruleForm.photo" :src="ruleForm.photo" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </upload>
        </el-form-item> -->
        <el-form-item label="姓名" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="昵称" prop="nickName">
          <el-input v-model="ruleForm.nickName"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-radio v-model="ruleForm.sex" label="1">男</el-radio>
          <el-radio v-model="ruleForm.sex" label="2">女</el-radio>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm">保存</el-button>
          <el-button @click="editVisible = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import md5 from 'js-md5'
import group from './group'
import api from '../../api'
export default {
  name: "userList",
  components: {
    group
  },
  props:{

  },
  data() {
    return {
      loading: false,
      params: {
        pageSize: 10,
        pageNum: 1,
        name: "",
        nickName: "",
      },
      total: 0,
      rows: [],
      visible:false,
      editVisible:false,
      ruleForm:{
        name:'',
        nickName:'',
        sex:1,
        id:'',
        photo:''
      },
      rules:{
        
      },
      editTitle:'',
      baseURL:api.baseURL,
      headers:{//获取token
        token:localStorage.getItem('token')
      },
      fileList:[]
    }
  },
  methods: {
    edit(row){
      this.editVisible = true
      if(row){
        this.editTitle = '修改用户'
        this.ruleForm = row
      }else{
        this.editTitle = '新增用户'
        this.ruleForm = {
          name:'',
          nickName:'',
          sex:'1',
          id:'',
          photo:''
        }
      }
    },
    onSuccess(res){
      console.log(res)
      //拼装图片路径赋值给表单
      this.ruleForm.photo = this.baseURL + res.message
    },
    submitForm(){
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.$http({
            url:this.ruleForm.id ? '/user/update' : '/user/add',
            method:!this.ruleForm.id ? 'POST' : 'PUT',
            data:this.ruleForm
          }).then(res => {
            if(!res.errorMsg){
              this.$message({
                message: !this.ruleForm.id ? '添加用户成功' : '修改用户信息成功',
                type: 'success'
              })
              this.editVisible = false
            }
          })
        } else {
          return false;
        }
      })
    },
    openGroup(userId){
      //打开弹框
      this.visible = true
      //延迟更新
      this.$nextTick(() => {
        //调用组件方法 获取数据
        this.$refs.group.getList(userId)
      })
    },
    resetPassWord(row){
      this.$confirm("是否重置该用户的密码?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        row.passWord = md5('123456')
        this.$http({
          url:'/user/update',
          method:'PUT',
          data:row
        }).then((res) => {
          if (!res.errorMsg) {
            this.$message({
              message: '重置该用户密码成功',
              type: 'success'
            });
          }
        });
      });
    },
    changeStatus(row){
      this.$http({
        url:'/user/update',
        method:'PUT',
        data:row
      }).then(res => {
        console.log(res)
      })
    },
    sizeChange(pageSize) {
      this.params.pageSize = pageSize;
      this.params.pageNum = 1;
      this.getList();
    },
    currentChange(pageNum) {
      this.params.pageNum = pageNum;
      this.getList();
    },
    searchList() {
      this.params.pageNum = 1;
      this.getList();
    },
    getList() {
      this.loading = true;
      this.$http({
        url: "http://localhost:8090/user/list",
        method: "GET",
        params: this.params,
      }).then((res) => {
        this.loading = false;
        this.total = res.total;
        this.rows = res.rows;
      });
    },
  },
  created() {
    this.getList();
  },
  mounted() {}
};
</script>

<style scoped>

</style>
